<template name="skeleton">
  <view class="sk-container">
    <view class="viewport viewport">
      <swiper class="swiper swiper" :current="0" :autoplay="false">
        <swiper-item
          style="
            position: absolute;
            width: 100%;
            height: 100%;
            transform: translate(0%, 0px) translateZ(0px);
          "
        >
          <view is="pagesOrder/list/components/OrderList">
            <scroll-view
              :refresher-enabled="true"
              :scroll-y="true"
              class="orders OrderList--orders"
              :enable-back-to-top="true"
            >
              <view class="card OrderList--card">
                <view class="status OrderList--status">
                  <text class="date OrderList--date sk-transparent sk-text-14-2857-494 sk-text"
                    >2024-03-27 11:05:40</text
                  >
                  <text class="sk-transparent sk-text-14-2857-700 sk-text">待评价</text>
                  <text
                    class="icon-delete OrderList--icon-delete sk-pseudo sk-pseudo-circle"
                  ></text>
                </view>
                <navigator class="goods OrderList--goods" hover-class="none">
                  <view class="cover OrderList--cover">
                    <image mode="aspectFit" class="sk-image"></image>
                  </view>
                  <view class="meta OrderList--meta">
                    <view
                      class="name OrderList--name ellipsis OrderList--ellipsis sk-transparent sk-text-14-2857-285 sk-text"
                    >
                      新生儿双层纱连体衣0-3岁</view
                    >
                    <view class="type OrderList--type sk-transparent sk-text-22-2222-602 sk-text"
                      >蓝色短袖， 73cm（建议6-12个月）
                    </view>
                  </view>
                </navigator>
                <navigator class="goods OrderList--goods" hover-class="none">
                  <view class="cover OrderList--cover">
                    <image mode="aspectFit" class="sk-image"></image>
                  </view>
                  <view class="meta OrderList--meta">
                    <view
                      class="name OrderList--name ellipsis OrderList--ellipsis sk-transparent sk-text-14-2857-468 sk-text"
                    >
                      户外快干轻巧遮阳帽</view
                    >
                    <view class="type OrderList--type sk-transparent sk-text-22-2222-578 sk-text"
                      >素色（无外袋）， 卡其</view
                    >
                  </view>
                </navigator>
                <view class="payment OrderList--payment">
                  <text
                    class="quantity OrderList--quantity sk-transparent sk-text-0-0000-71 sk-text"
                    style="background-position-x: 100%"
                    >共2件商品</text
                  >
                  <text
                    class="sk-transparent sk-text-0-0000-409 sk-text"
                    style="background-position-x: 100%"
                    >实付</text
                  >
                  <text class="amount OrderList--amount sk-transparent"
                    ><text class="symbol OrderList--symbol sk-transparent sk-opacity">¥</text>
                    114</text
                  >
                </view>
                <view class="action OrderList--action">
                  <navigator
                    class="button OrderList--button secondary OrderList--secondary sk-transparent sk-text-14-2857-85 sk-text"
                    hover-class="none"
                  >
                    再次购买
                  </navigator>
                </view>
              </view>
              <view class="card OrderList--card">
                <view class="status OrderList--status">
                  <text class="date OrderList--date sk-transparent sk-text-14-2857-710 sk-text"
                    >2024-03-26 20:07:52</text
                  >
                  <text class="sk-transparent sk-text-14-2857-648 sk-text">待收货</text>
                </view>
                <navigator class="goods OrderList--goods" hover-class="none">
                  <view class="cover OrderList--cover">
                    <image mode="aspectFit" class="sk-image"></image>
                  </view>
                  <view class="meta OrderList--meta">
                    <view
                      class="name OrderList--name ellipsis OrderList--ellipsis sk-transparent sk-text-14-2857-726 sk-text"
                    >
                      伊海诗冬日出行多功能防风保暖围脖</view
                    >
                    <view class="type OrderList--type sk-transparent sk-text-22-2222-445 sk-text"
                      >双层螺纹-山脉蓝</view
                    >
                  </view>
                </navigator>
                <view class="payment OrderList--payment">
                  <text
                    class="quantity OrderList--quantity sk-transparent sk-text-0-0000-140 sk-text"
                    style="background-position-x: 100%"
                    >共1件商品</text
                  >
                  <text
                    class="sk-transparent sk-text-0-0000-999 sk-text"
                    style="background-position-x: 100%"
                    >实付</text
                  >
                  <text class="amount OrderList--amount sk-transparent"
                    ><text class="symbol OrderList--symbol sk-transparent sk-opacity">¥</text>
                    40</text
                  >
                </view>
                <view class="action OrderList--action">
                  <navigator
                    class="button OrderList--button secondary OrderList--secondary sk-transparent sk-text-14-2857-639 sk-text"
                    hover-class="none"
                  >
                    再次购买
                  </navigator>
                  <view
                    class="button OrderList--button primary OrderList--primary sk-transparent sk-text-14-2857-23 sk-text"
                  >
                    确认收货</view
                  >
                </view>
              </view>
            </scroll-view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<style lang="scss">
.sk-transparent {
  color: transparent !important;
}

.sk-text-26-6667-685 {
  background-image: linear-gradient(
    transparent 26.6667%,
    #eeeeee 0%,
    #eeeeee 73.3333%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}

.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}

.sk-text-26-6667-554 {
  background-image: linear-gradient(
    transparent 26.6667%,
    #eeeeee 0%,
    #eeeeee 73.3333%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}

.sk-text-26-6667-822 {
  background-image: linear-gradient(
    transparent 26.6667%,
    #eeeeee 0%,
    #eeeeee 73.3333%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}

.sk-text-26-6667-755 {
  background-image: linear-gradient(
    transparent 26.6667%,
    #eeeeee 0%,
    #eeeeee 73.3333%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}

.sk-text-26-6667-327 {
  background-image: linear-gradient(
    transparent 26.6667%,
    #eeeeee 0%,
    #eeeeee 73.3333%,
    transparent 0%
  ) !important;
  background-size: 100% 60rpx;
  position: relative !important;
}

.sk-text-14-2857-494 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}

.sk-text-14-2857-700 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}

.sk-text-14-2857-285 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}

.sk-text-22-2222-602 {
  background-image: linear-gradient(
    transparent 22.2222%,
    #eeeeee 0%,
    #eeeeee 77.7778%,
    transparent 0%
  ) !important;
  background-size: 100% 43.2rpx;
  position: relative !important;
}

.sk-text-14-2857-468 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}

.sk-text-22-2222-578 {
  background-image: linear-gradient(
    transparent 22.2222%,
    #eeeeee 0%,
    #eeeeee 77.7778%,
    transparent 0%
  ) !important;
  background-size: 100% 43.2rpx;
  position: relative !important;
}

.sk-text-0-0000-71 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 24rpx;
  position: relative !important;
}

.sk-text-0-0000-409 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28rpx;
  position: relative !important;
}

.sk-opacity {
  opacity: 0 !important;
}

.sk-text-14-2857-85 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}

.sk-text-14-2857-710 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}

.sk-text-14-2857-648 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 39.2rpx;
  position: relative !important;
}

.sk-text-14-2857-726 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}

.sk-text-22-2222-445 {
  background-image: linear-gradient(
    transparent 22.2222%,
    #eeeeee 0%,
    #eeeeee 77.7778%,
    transparent 0%
  ) !important;
  background-size: 100% 43.2rpx;
  position: relative !important;
}

.sk-text-0-0000-140 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 24rpx;
  position: relative !important;
}

.sk-text-0-0000-999 {
  background-image: linear-gradient(
    transparent 0%,
    #eeeeee 0%,
    #eeeeee 100%,
    transparent 0%
  ) !important;
  background-size: 100% 28rpx;
  position: relative !important;
}

.sk-text-14-2857-639 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}

.sk-text-14-2857-23 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 36.4rpx;
  position: relative !important;
}

.sk-image {
  background: #efefef !important;
}

.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}

.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}

.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}

.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
